<template>
  <div>
    <!-- 头部 -->
    <div class="header-box">
      <div class="left-box">
        <div class="return-box" @click="$router.go(-1)">
          <sc-icon name="iconfanhui"></sc-icon>
          <span class="return">返回</span>
        </div>
        <span class="line">|</span>
        <span class="title">保养计划</span>
      </div>
      <div class="btn-box"></div>
    </div>
    <div class="rule-con">
      <div class="left" :style="'height:' + menuHeight + 'px'">
        <left-menu ref="leftMenu" @clickModel="callback" :modelId="modelId" :type="2"></left-menu>
      </div>
      <div class="right">
        <div class="right-head">
          <div class="h-left">
            <el-input
              class="box2"
              v-model="searchTxt"
              @keyup.enter.native="updateList"
              clearable
              @clear="updateList"
              placeholder="输入关键字查找"
            ></el-input>
          </div>
          <div class="h-right">
            <el-button type="primary" v-if="checkPermission('maintenanceApp:maintenancePlan:add')" @click="addPlan"
              >新增</el-button
            >
          </div>
        </div>
        <div class="right-content" v-if="checkPermission('maintenanceApp:maintenancePlan:list')">
          <list-table
            ref="planList"
            v-if="showTable"
            :listUrl="'maintenance/getPlanList'"
            :useOrder="true"
            :usePage="true"
            :maxHeight="tableHeight"
            :rowClick="{ callback: '' }"
            :columnName="columnNames"
            :expanedParam="expanedParam"
          >
            <template v-slot:actionButton>
              <el-table-column label="操作" align="left" width="150">
                <template slot-scope="scope">
                  <div class="buttons">
                    <span
                      class="btn"
                      v-if="checkPermission('maintenanceApp:maintenancePlan:detail')"
                      @click="showDetail(scope.row)"
                      >详情</span
                    >
                    <span
                      class="btn"
                      v-if="checkPermission('maintenanceApp:maintenancePlan:clone')"
                      style="margin-left: 10px"
                      @click="cloneData(scope.row)"
                      >克隆</span
                    >
                    <el-popover
                      popper-class="sc-customer-operate-popper"
                      placement="bottom"
                      width="176"
                      trigger="hover"
                    >
                      <div class="button_container">
                        <el-button
                          v-if="checkPermission('maintenanceApp:maintenancePlan:modify')"
                          type="text"
                          @click="modify(scope.row)"
                          >修改</el-button
                        >
                        <el-button
                          v-if="checkPermission('maintenanceApp:maintenancePlan:delete')"
                          style="color: #f56c6c"
                          type="text"
                          @click="deleteRow(scope.row)"
                          >删除</el-button
                        >
                      </div>
                      <div class="more" slot="reference">...</div>
                    </el-popover>
                  </div>
                </template>
              </el-table-column>
            </template>
          </list-table>
        </div>

        <!--对话框-->
        <el-dialog
          :title="isModify ? '修改保养计划' : '新增保养计划'"
          :visible.sync="addNewDialog"
          :close-on-click-modal="false"
          width="40%"
          :modal-append-to-body="false"
        >
          <div>
            <div class="title">{{ modelName }}</div>
            <el-form ref="planModelForm" :model="planForm" :rules="rules" class="demo-form-inline" label-width="80px">
              <el-form-item label="计划名称" prop="name">
                <el-input class="form-item" v-model.trim="planForm.name"></el-input>
              </el-form-item>
              <el-form-item label="变量名" prop="variable">
                <el-select class="form-item" v-model="planForm.variable" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in varList"
                    :key="'indate_' + index"
                    :label="item.vname"
                    :value="item.vk"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="模式">
                <el-radio-group v-model="planForm.mode">
                  <el-radio :label="2">周期</el-radio>
                  <el-radio :label="1">触发</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="planForm.mode === 2">
                <el-form-item label="初始值" prop="initial">
                  <div class="form-item">
                    <el-input class="form-input" type="number" v-model="planForm.initial"></el-input>
                    <div class="unit">天</div>
                  </div>
                </el-form-item>
                <el-form-item label="变化方向">
                  <el-radio-group v-model="planForm.directionChange">
                    <el-radio :label="1">递增</el-radio>
                    <el-radio :label="2">递减</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div v-if="planForm.mode === 1">
                <el-form-item label="条件">
                  <el-select class="form-item" v-model="planForm.condition" placeholder="请选择">
                    <el-option label="=" value="=="></el-option>
                    <el-option label=">=" value=">="></el-option>
                    <el-option label="<=" value="<="></el-option>
                    <el-option label=">" value=">"></el-option>
                    <el-option label="<" value="<"></el-option>
                    <el-option label="!=" value="!="></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <el-form-item label="阀值" prop="threshold">
                <el-input class="form-item" type="number" v-model="planForm.threshold"></el-input>
              </el-form-item>
              <el-form-item label="保养说明">
                <el-input
                  class="form-item"
                  type="textarea"
                  maxlength="500"
                  :show-word-limit="true"
                  :rows="4"
                  v-model="planForm.maintenanceExplain"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addNewDialog = false">取 消</el-button>
            <el-button type="primary" @click="submitData">确定</el-button>
          </span>
        </el-dialog>

        <!--详情-->
        <el-dialog
          title="保养计划详情"
          :close-on-click-modal="false"
          :visible.sync="detailDialog"
          width="40%"
          :modal-append-to-body="false"
        >
          <div class="dialog-detail">
            <div class="title">{{ planDetail.name }}</div>
            <div class="content">
              <div class="con-item">
                <div class="con-li">
                  <span class="con-li-title">物模型</span>
                  <span class="con-li-val">{{ planDetail.modelName }}</span>
                </div>
                <div class="con-li">
                  <span class="con-li-title">变量名</span>
                  <span class="con-li-val">{{ planDetail.vname }}</span>
                </div>
              </div>
              <div class="con-item">
                <div class="con-li">
                  <span class="con-li-title">模式</span>
                  <span class="con-li-val">{{ planDetail.mode === 1 ? '触发' : '周期' }}</span>
                </div>
                <div v-if="planDetail.mode === 2" class="con-li">
                  <span class="con-li-title">初始值</span>
                  <span class="con-li-val">{{ planDetail.initial }}</span>
                </div>
                <div v-else class="con-li">
                  <span class="con-li-title">条件</span>
                  <span class="con-li-val">{{ planDetail.condition }}</span>
                </div>
              </div>
              <div class="con-item">
                <div v-if="planDetail.mode === 2" class="con-li">
                  <span class="con-li-title">变化方向</span>
                  <span class="con-li-val">{{ planDetail.directionChange === 1 ? '递增' : '递减' }}</span>
                </div>
                <div class="con-li">
                  <span class="con-li-title">阈值</span>
                  <span class="con-li-val">{{ planDetail.threshold }}</span>
                </div>
              </div>
              <div class="con-item">
                <div class="con-li">
                  <span class="con-li-title">保养说明</span>
                  <span class="con-li-val">{{ planDetail.maintenanceExplain }}</span>
                </div>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="detailDialog = false">关 闭</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import leftMenu from '../../warningRule/util/leftMenu.vue';
import ListTable from '../../../components/ListTable.vue';
import { getModelDetail, createPlan, deletePlan, modifyPlan, getPlanDetail } from '../../../api/maintence';
import checkBtnPermission from '@/utils/checkBtnPermission';
export default {
  components: { leftMenu, ListTable },
  name: 'warningRule',
  data() {
    return {
      tableHeight: 0, // 表格高度
      menuHeight: 0, // 菜单高度
      modelId: 0, // 物模型ID
      levelList: [
        { label: '搬运类', value: 1 },
        { label: '输送类', value: 2 },
        { label: '包装类', value: 3 },
        { label: '其他类', value: 4 }
      ],
      isModify: false, // 修改flag
      addNewDialog: false, // 添加
      typeData: '', // 等级
      searchTxt: '', // 搜索
      title: '',
      showTable: false, // 是佛加载列表
      modelName: '', // 模型名称
      columnNames: {
        name: '计划名称',
        vname: '变量名',
        mode: {
          type: 'mode',
          name: '通知模式'
        },
        threshold: '阀值',
        maintenanceExplain: {
          name: '保养描述',
          useTip: true
        }
      }, // 表格展示字段
      planForm: {}, // 新增form对象
      planDetail: {},
      rules: {
        name: [
          { required: true, message: '请填写计划名称', trigger: 'blur' },
          { min: 2, max: 16, message: '长度在 16 个字符以内', trigger: 'blur' }
        ],
        variable: [{ required: true, message: '请选择变量名', trigger: 'blur' }],
        initial: [{ required: true, message: '请填写初始值', trigger: 'blur' }],
        threshold: [{ required: true, message: '请填写阀值', trigger: 'blur' }]
      }, // 表单验证对象
      varList: [], // 变量列表
      detailDialog: false, // 详情
      expanedParam: {} // 表格参数
    };
  },
  mounted() {
    this.getContentHeight();
  },
  methods: {
    // 高度
    getContentHeight() {
      const main = document.querySelector('.main');
      const mainHeight = main ? main.getBoundingClientRect().height : 0;
      const title = document.querySelector('.page-title');
      const titleHeight = title ? title.getBoundingClientRect().height : 0;
      this.tableHeight = mainHeight - titleHeight - 76 - 45;
      this.menuHeight = mainHeight - titleHeight - 76 - 45;
      console.log(this.menuHeight);
    },
    // 检查
    checkPermission(name) {
      return checkBtnPermission(name);
    },
    // 选择物模型
    callback(res) {
      this.modelId = res.id;
      this.modelName = res.name;
      this.expanedParam.modelId = res.id;
      this.showTable = true;
      this.$nextTick(res => {
        this.$refs.planList.getListData();
      });
    },
    // 更新列表
    updateList() {
      this.expanedParam = {
        grade: this.typeData,
        keyword: this.searchTxt,
        modelId: this.modelId
      };
      this.$nextTick(res => {
        this.$refs.planList.getListData();
      });
    },
    // 新增保养计划
    addPlan() {
      getModelDetail({ id: this.modelId }).then(res => {
        this.isModify = false;
        this.planForm = {
          mode: 1,
          directionChange: 1,
          condition: '=='
        };
        this.varList = res.data;
        this.addNewDialog = true;
      });
    },
    // 查看详情
    showDetail(row) {
      getPlanDetail({ id: row.id }).then(res => {
        this.planDetail = res.data;
        this.detailDialog = true;
      });
    },

    // 修改
    modify(row) {
      getModelDetail({ id: this.modelId }).then(res => {
        this.varList = res.data;
        this.isModify = true;
        if (!row.condition) row.condition = '==';
        this.planForm = JSON.parse(JSON.stringify(row));
        this.addNewDialog = true;
      });
    },
    // 克隆
    cloneData(row) {
      getModelDetail({ id: this.modelId }).then(res => {
        this.varList = res.data;
        this.isModify = false;
        this.planForm = JSON.parse(JSON.stringify(row));
        this.addNewDialog = true;
      });
    },
    // 删除行
    deleteRow(row) {
      this.$confirm('此操作将永久删除该计划, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deletePlan({ id: row.id }).then(res => {
            this.$refs.planList.getListData();
            this.$refs.leftMenu.updateList();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    // 新增保养计划
    submitData() {
      this.$refs.planModelForm.validate(res => {
        if (res) {
          const param = Object.assign({}, this.planForm);
          param.threshold = parseInt(param.threshold);
          param.initial = parseInt(param.initial);
          param.modelId = this.modelId;
          if (this.isModify) {
            modifyPlan(param).then(res => {
              this.$message({
                type: 'success',
                message: '操作成功'
              });
              this.addNewDialog = false;
              this.$refs.planList.getListData();
            });
          } else {
            createPlan(param).then(res => {
              this.$message({
                type: 'success',
                message: '操作成功'
              });
              this.$refs.planList.getListData();
              this.$refs.leftMenu.getModelData();
              this.addNewDialog = false;
            });
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 0 20px;
  border-bottom: 1px solid #ebeef5;
  .left-box {
    display: flex;
    align-items: center;
    .return-box {
      width: 100px;
      cursor: pointer;
      .return {
        color: #303133;
        font-size: 14px;
        margin-left: 3px;
      }
    }
    .line {
      margin: 0 12px;
      color: #c0c4cc;
    }
    .title {
      font-size: 18px;
      color: #606266;
      padding-bottom: 0 !important;
    }
  }
}
.more {
  font-size: 14px;
  font-weight: 600;
  transform: rotate(90deg);
  margin-left: 20px;
  letter-spacing: 1px;
  text-align: center;
  color: #c0c4cc;
  height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}

.title {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #3378ff;
  font-size: 20px;
  padding-bottom: 20px;
}

.form-item {
  flex: 1;
  display: flex;
  .form-input {
    flex: 8;
  }
  .unit {
    flex: 1;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center;
    background: #f5f7fa;
  }
}

.dialog-detail {
  .content {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    .con-item {
      flex: 1;
      margin-top: 20px;
      display: flex;
      .con-li {
        flex: 1;
        display: flex;
        align-items: center;
        .con-li-title {
          color: #909399;
          font-size: 14px;
          width: 80px;
          text-align: right;
        }
        .con-li-val {
          color: #606266;
          font-size: 14px;
          padding-left: 10px;
          flex: 1;
        }
      }
    }
  }
}

.rule-con {
  display: flex;
  .left {
    width: 283px;
  }
  .right {
    width: calc(100% - 300px);
    .right-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      .box1 {
        width: 200px;
      }
      .box2 {
        width: 300px;
        margin-left: 12px;
      }
      .h-right {
        color: #3378ff;
      }
    }
    .right-content {
      padding: 0px 20px 0px 20px;
      .buttons {
        display: flex;
        align-items: center;
        .btn {
          color: #3378ff;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
